<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入协议名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="primary" icon="el-icon-plus" @click="newQuipmentClick"
          >新建协议</el-button
        >
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="agreementName"
            label="协议名称"
            align="center"
          />

          <el-table-column
            prop="agreementType"
            label="协议类型"
            align="center"
          />
          <el-table-column prop="userName" label="用户名称" align="center" />
          <el-table-column prop="pwd" label="密码" align="center" />
          <el-table-column prop="serverIp" label="服务IP" align="center" />
          <el-table-column prop="agreementDes" label="描述" align="center" />

          <el-table-column label="操作" width="300" align="center">
            <template #default="{ row }">
              <el-button type="warning" size="mini" @click="handlerEdit(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="handlerDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newQuipmentModel"
            :rules="rules"
            ref="loginFormRef"
            label-width="100px"
          >
            <el-form-item label="协议名称" prop="agreementName">
              <el-input v-model="newQuipmentModel.agreementName" />
            </el-form-item>

            <el-form-item label="协议类型" prop="agreementType">
              <el-select v-model="newQuipmentModel.agreementType">
                <el-option
                  v-for="item in agreementTypeData"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="newQuipmentModel.userName" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="newQuipmentModel.pwd" />
            </el-form-item>
            <el-form-item label="服务地址" prop="serverIp">
              <el-input v-model="newQuipmentModel.serverIp" />
            </el-form-item>
            <el-form-item
              label="请求路径"
              v-if="newQuipmentModel.agreementType == 'HTTP'"
            >
              <el-input v-model="newQuipmentModel.path" />
            </el-form-item>

            <el-form-item label="描述">
              <el-input v-model="newQuipmentModel.agreementDes" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>
    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import {
  insertAgreement,
  updateAgreement,
  deleteAgreement,
  queryPageAgreement
} from "@/api/modelManagement/agreement"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      agreementTypeData: [{ value: "HTTP" }, { value: "MQTT" }],
      tableData: [],
      formatDate: "yyyy-MM-dd",
      count: 0,
      projectTypeOptions: [
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "类型一",
          value: "1"
        },
        {
          label: "类型二",
          value: "2"
        },
        {
          label: "类型三",
          value: "3"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newQuipmentModel: {},
      detailsDisabled: false,
      isGlobalMessageShow: false,

      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      rules: {
        agreementName: [
          { required: true, message: "请输入协议名称", trigger: "blur" }
        ],
        agreementType: [
          { required: true, message: "请选择协议类型", trigger: "change" }
        ],
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
        serverIp: [
          { required: true, message: "请输入服务地址", trigger: "blur" }
        ]
      }
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.getData()
  },
  methods: {
    async getData(pageIndex = 1, pageSize = 20) {
      const { searchInput } = this.searchForm
      this.loading = true
      const data = await queryPageAgreement({
        pageIndex: 1,
        pageSize: 20,
        agreementName: searchInput
      })
      this.tableData = data.object.data
      this.count = data.object.count
      this.loading = false
      console.log(data, "data")
    },
    async searchClick() {
      this.getData()
    },
    async dialogSave() {
      this.$refs.loginFormRef.validate(async (v) => {
        if (v) {
          this.$refs.ycDialog.dialogVisible = false
          if (this.detailsDisabled) {
            // 详情
            this.$refs.ycDialog.dialogVisible = false
          } else if (this.newQuipmentModel.id) {
            //  编辑
            const { status } = await updateAgreement({
              ...this.newQuipmentModel
            })
            if (status == 200) {
              this.isGlobalMessageShow = true
              this.message = "success"
              this.getData()
              this.newQuipmentModel = {}
            } else {
              this.message = "error"
            }
          } else {
            this.insertDeviceModelFun()
            this.getData()
            this.newQuipmentModel = {}
          }
        }
      })
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      this.searchForm = {}
      this.getData()
    },
    handlerEdit(row) {
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.detailsDisabled = false
      this.dialogCenterTitle = "编辑协议基本信息"
      this.dialogTitle = "协议详情"
      this.newQuipmentModel = { ...row }
    },
    handlerDelete({ id }) {
      this.$confirm("确定删除此协议吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteAgreement({ id })
        if (status == 200) {
          this.getData()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    newQuipmentClick() {
      this.dialogCenterTitle = "新建协议"
      this.dialogTitle = "协议详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.newQuipmentModel = {}
      this.detailsDisabled = false
    },
    async insertDeviceModelFun() {
      const { status } = await insertAgreement({ ...this.newQuipmentModel })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      display: flex;

      .formClass {
        display: flex;
        margin-right: 20px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
          .el-date-editor {
            width: 336px;
            margin-left: 10px;
          }
        }
      }
      .el-button {
        // width: 42px;
        height: 36px;
        margin-top: 20px;
      }
    }
  }
}
</style>
